<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        .aui-toast-content {
            color: #fff;
        }
        .aui-refresh-content {
          min-height: calc(100vh - 0.5rem)
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="user_nav_line"></div>
        <!-- <div class="aui-refresh-content"> -->
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            收货人
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写收货人" style="font-size:0.6rem" v-model="userName">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            联系电话
                        </div>
                        <div class="aui-list-item-input">
                            <input type="number" placeholder="请填写联系方式" style="font-size:0.6rem" v-model="userPhone">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-list-item-middle aui-list-item-arrow" @click="addAbout">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            所在地区
                        </div>
                        <div class="aui-list-item-right" style="padding-right: 1rem;">{{usercity}}</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            详细地址
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请输入详细地址如门牌号，如道路、门牌号" style="font-size:0.6rem" v-model="userAdd" />
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title" style="font-size:0.7rem">设置默认地址</div>
                        <div class="aui-list-item-right" style="margin-right:0.5rem">
                            <input type="checkbox" class="aui-switch">
                        </div>
                    </div>
                </li>
            </ul>
            <button type="button" name="button" class="shopping_btn" @click="addAddress()" style="border-radius:1.5rem;">确认</button>
        <!-- </div> -->
        <div>

        </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-popup.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../script/address_data.js"></script>
<script type="text/javascript">
    var popup = new auiPopup();

    function showPopup() {
        popup.show(document.getElementById("top-right"))
    }
</script>
<script type="text/javascript">
    apiready = function() {
        var toast = new auiToast({});
        new Vue({
            el: '#app',
            data: {
                userPhone: '',
                userName: '',
                userAdd: '',
                usercity: '请选择',
                userProvince: '',
                userMaincity: '',
                userCounty: '',
                isDefault: 2
            },
            methods: {
                //添加地址
                addAddress:function() {
                    var _this = this;
                    var toast = new auiToast();
                    if (_this.userName == '') {
                        alert("请输入收货人");
                        return;
                    }
                    if (_this.userAdd == '') {
                        toast.fail({
                            title: "请填写详细地址",
                            duration: 2000
                        });
                        return;
                    }
                    if (_this.userPhone == '') {
                        alert("请输入手机号码");
                        return;
                    } else if (!checkMobile(_this.userPhone)) {
                        toast.fail({
                            title: "手机号错误",
                            duration: 2000
                        });
                        return;
                    }
                    if (_this.userProvince == "" || _this.userMaincity == "" || _this.userCounty == "") {
                        toast.fail({
                            title: "请选择地区",
                            duration: 2000
                        });
                        return;
                    }
                    if ($('.aui-switch').attr('checked')) {
                        _this.isDefault = 1;
                    } else {
                        _this.isDefault = 2;

                    }
                    api.ajax({
                        url: window.Url.Freeucenter_changeAddress,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                consignee: _this.userName,
                                telephone: Base64.encode('UNO' + _this.userPhone + 'HACHA'),
                                type: 1,
                                province: _this.userProvince,
                                city: _this.userMaincity,
                                county: _this.userCounty,
                                address: _this.userAdd,
                                is_default: _this.isDefault
                            }
                        }
                    }, function(ret, err) {
                        if (ret.re == 1) {
                            // alert( JSON.stringify( ret ) );
                            toast.success({
                                title: ret.info,
                                duration: 1000
                            });
                            //重新加载
                            api.execScript({
                                name: 'headerone',
                                frameName: 'type',
                                script: 'window.location.reload()'
                            });
                            api.execScript({
                                name: 'user_url',
                                frameName: 'storeData',
                                script: 'window.location.reload()'
                            });
                            setTimeout(function() {
                                api.closeWin()
                            }, 1000)

                        } else {
                            toast.fail({
                                title: ret.info,
                                duration: 2000
                            });
                            //alert( JSON.stringify( err ) );

                        }
                    });

                },
                //详细地址
                addAbout:function() {
                    var _this = this;
                    var UIActionSelector = api.require('UIActionSelector');
                    UIActionSelector.open({
                        datas: address_data,
                        layout: {
                            row: 5,
                            col: 3,
                            height: 40,
                            size: 12,
                            sizeActive: 14,
                            rowSpacing: 5,
                            colSpacing: 10,
                            maskBg: 'rgba(0,0,0,0.2)',
                            bg: '#fff',
                            color: '#888',
                            colorActive: '#f00',
                            colorSelected: '#f00'
                        },
                        animation: true,
                        cancel: {
                            text: '取消',
                            size: 12,
                            w: 90,
                            h: 35,
                            bg: '#fff',
                            bgActive: '#ccc',
                            color: '#888',
                            colorActive: '#fff'
                        },
                        ok: {
                            text: '确定',
                            size: 12,
                            w: 90,
                            h: 35,
                            bg: '#fff',
                            bgActive: '#ccc',
                            color: '#888',
                            colorActive: '#fff'
                        },
                        title: {
                            text: '请选择',
                            size: 12,
                            h: 44,
                            bg: '#eee',
                            color: '#888'
                        },
                        fixedOn: api.frameName
                    }, function(ret, err) {
                        if (ret.eventType == "ok") {
                            console.log(JSON.stringify(ret));
                            _this.usercity = ''
                            // for(var i in ret.selectedInfo) { _this.usercity += ret.selectedInfo[i].name }
                            _this.usercity += _this.userProvince = ret.level1;
                            _this.usercity += _this.userMaincity = ret.level2 || ' ';
                            _this.usercity += _this.userCounty = ret.level3 || ' ';

                        }
                    });
                }
            },
            mounted:function() {
            },
            updated:function() {


            }

        })
    }
</script>

</html>
